<template>
  <header class="header" :class="{visible:isVisible,check:isCheck}">
    <transition name="slide-fade">
      <div v-show="!isVisible">
        <div class="header-tool">
          <div class="item">
            <span v-if="isCheck" @click="cancelCheck" class="icon">
              <mu-icon value="取消"></mu-icon>
            </span>
            <span v-else class="icon" @click="openFolder">
              <mu-icon value="文件夹"></mu-icon>
            </span>
          </div>
          <div class="flex" style="text-align:center">
            <span v-if="isCheck">{{checkTitle}}</span>
            <span v-else>{{title}}</span>
          </div>
          <div class="item" style="text-align:right">
            <span v-if="isCheck" @click="allCheck(!allChecked)" class="icon">
              <mu-icon :value="checkBtnTxt"></mu-icon>
            </span>
            <span v-else>
              <span class="icon" v-if="layout=='grid'" @click="changeLayout">
                <mu-icon value="列表"></mu-icon>
              </span>
              <span class="icon" v-else @click="changeLayout">
                <mu-icon value="方格"></mu-icon>
              </span>
            </span>
          </div>
        </div>
      </div>
    </transition>
    <div class="search">
      <div class="icon">
        <mu-icon value="搜索"></mu-icon>
      </div>
      <input placeholder="搜索便签" type="text" v-model="searchTxt" @keyup="search" @focus="searchFocus"
        @blur="searchBlur" />
    </div>
  </header>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      title: "便签",
      checkBtnTxt: "全选",
      searchTxt: "",
      isVisible: false
    };
  },
  computed: {
    ...mapGetters(["layout", "isCheck"]),
    //获取便签勾选状态
    allChecked() {
      return this.$store.state.notes.some(note => note.done);
    },
    //便签选中数量提示
    checkTitle() {
      if (this.$store.state.deleteNotes.length == 0) return "请选择项目";
      return `已选择${this.$store.state.deleteNotes.length}项`;
    }
  },
  methods: {
    //显示搜索框
    searchFocus() {
      this.isVisible = true;
    },
    //隐藏搜索框
    searchBlur() {
      this.isVisible = false;
    },
    //搜索
    search() {
      this.$store.state.search = this.searchTxt;
    },
    //切换布局
    changeLayout() {
      if (this.$store.state.layout == "list") {
        this.$store.state.layout = "grid";
      } else {
        this.$store.state.layout = "list";
      }
    },
    //取消勾选
    cancelCheck() {
      this.$store.dispatch("cancelCheck");
    },
    //全选切换
    allCheck(done) {
      this.checkBtnTxt = done ? "取消全选" : "全选";
      this.$store.dispatch("allCheck", done);
    },
    //打开便签夹
    openFolder() {
      this.$router.push({ path: "noteFolder" });
    }
  }
};
</script>

<style scoped>
.flex {
  flex: 1;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
  background: #f5f5f5;
}
.header .header-tool {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  display: flex;
  box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.header.check .header-tool {
  background: #fff;
}
.header .item {
  width: 100px;
  padding: 0 10px;
}
.header .item .icon {
  font-size: 12px;
  color: #313131;
  vertical-align: middle;
  cursor: pointer;
}
.header.visible {
  padding-top: 10px;
}
.search {
  position: relative;
  margin: 0 10px;
  border: 1px solid #eee;
  background: #e6e6e6;
  border-radius: 5px;
}
.search .icon {
  position: absolute;
  top: 0.3rem;
  left: 0.2rem;
  color: #8a8a8a;
  vertical-align: middle;
  cursor: pointer;
}
.search input {
  height: 1.8rem;
  border: 0;
  width: 100%;
  padding-left: 2rem;
  outline: none;
  background: #e6e6e6;
  color: #8a8a8a;
  border-radius: 5px;
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 1.5, 0.2, 1);
}
.slide-fade-enter {
  opacity: 0;
}
.slide-fade-leave-to {
  transform: translateY(-5px);
  opacity: 0;
}
</style>




